
{% extends "base.html" %}
{% load static %}

{% block title %}GodJin · 首页{% endblock %}

{% block extra_css %}
  <!-- 首页专属样式 -->
  <link rel="stylesheet" href="{% static 'css/home.css' %}">
{% endblock %}

{% block content %}
  <!-- ===== 首页 Header ===== -->
  <header class="hero u-bleed py-5 mb-4 border-bottom">
    <div class="container">
      <div class="row align-items-center g-4">
        <div class="col-md-8">
          <h1 class="display-5 fw-bold mb-2">烬</h1>
          <p class="lead text-muted mb-0">星火余晖的一缕残烬</p>
          <!-- 功能按钮区 -->
          <span class="d-flex flex-wrap gap-2 mt-3">
            <a href="/introduce" class="btn btn-outline-primary btn-sm d-inline-flex align-items-center gap-1">
              <i class="bi bi-info-circle"></i> 关于 · 烬
            </a>
{#            <a href="#" class="btn btn-outline-primary btn-sm d-inline-flex align-items-center gap-1">#}
{#              <i class="bi bi-info-circle"></i> AI#}
{#            </a>#}
            <a href="/feedback" class="btn btn-outline-primary btn-sm d-inline-flex align-items-center gap-1">
              <i class="bi bi-info-circle"></i> 反馈
            </a>
          </span>
        </div>

        <!-- 小屏居中，大屏右侧；图片自适应 -->
        <div class="col-md-4 text-md-end">
          <img src="{% static 'picture/jinzhu.jpg' %}"
               class="d-block mx-auto hero-cover"
               alt="封面占位图" loading="lazy">
        </div>
      </div>
    </div>
  </header>

  <!-- ===== 视频平台入口 ===== -->
  <section class="mb-4">
    <h5 class="section-title">视频</h5>
    <div class="row row-cols-2 row-cols-md-4 g-3">
      <!-- 抖音 -->
      <div class="col">
        <a class="link-tile text-decoration-none" href="/douyin"  rel="noopener noreferrer" aria-label="抖音">
          <div class="card h-100">
            <div class="card-body d-flex align-items-center gap-2">
              <img src="{% static 'picture/douyin.jpg' %}" alt="抖音图标">
              <div class="fw-semibold">抖音</div>
            </div>
          </div>
        </a>
      </div>
      <!-- 快手 -->
{#      <div class="col">#}
{#        <a class="link-tile text-decoration-none" href="#"  rel="noopener noreferrer" aria-label="快手">#}
{#          <div class="card h-100">#}
{#            <div class="card-body d-flex align-items-center gap-2">#}
{#              <img src="{% static 'picture/kuaishou.jpg' %}" alt="快手图标">#}
{#              <div class="fw-semibold">快手</div>#}
{#            </div>#}
{#          </div>#}
{#        </a>#}
{#      </div>#}
      <!-- B站 -->
{#      <div class="col">#}
{#        <a class="link-tile text-decoration-none" href="#"  rel="noopener noreferrer" aria-label="B站">#}
{#          <div class="card h-100">#}
{#            <div class="card-body d-flex align-items-center gap-2">#}
{#              <img src="{% static 'picture/bzhan.jpg' %}" alt="B站图标">#}
{#              <div class="fw-semibold">B站</div>#}
{#            </div>#}
{#          </div>#}
{#        </a>#}
{#      </div>#}
      <!-- 腾讯视频 -->
      <div class="col">
        <a class="link-tile text-decoration-none" href="/free_video"  rel="noopener noreferrer" aria-label="腾讯视频">
          <div class="card h-100">
            <div class="card-body d-flex align-items-center gap-2">
              <img src="{% static 'picture/video.png' %}" alt="影视">
              <div class="fw-semibold">影视</div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </section>

  <!-- ===== 音乐入口 ===== -->
{#  <section class="mb-4">#}
{#    <h5 class="section-title">音乐</h5>#}
{#    <a class="link-tile text-decoration-none" href="#" aria-label="音乐">#}
{#      <div class="card">#}
{#        <div class="card-body d-flex align-items-center gap-2">#}
{#          <img src="{% static 'picture/yinyue.png' %}" alt="音乐图标">#}
{#          <div class="fw-semibold">音乐</div>#}
{#        </div>#}
{#      </div>#}
{#    </a>#}
{#  </section>#}

  <!-- ===== 数据分析入口 ===== -->
  <section class="mb-4">
    <h5 class="section-title">数据分析</h5>
    <a class="link-tile text-decoration-none" href="/analysis"  aria-label="数据分析">
      <div class="card">
        <div class="card-body d-flex align-items-center gap-2">
          <img src="{% static 'picture/shujufenxi.png' %}" alt="数据分析图标">
          <div class="fw-semibold">数据分析</div>
        </div>
      </div>
    </a>
  </section>
{% endblock %}
